import React, { useState, useEffect } from 'react'
import axios from 'axios'
import second_Css from './second.module.css'
import { BrowserRouter as Router, Route, Routes, useNavigate, useLocation } from 'react-router-dom'
import { Swiper, Toast } from 'react-vant'
import './base.less'
export default function Second_info() {
	const navigate = useNavigate()
	const Location = useLocation()
	const [listInfo, setListInfo] = useState([])
	const [img_list, setImg_list] = useState([])
	const [shang, setShangname] = useState('')
	const [shangContent, setshangcontent] = useState('')
	const getinfo = () => {
		let id = Location.search.split('=')[1]
		axios.get(`http://localhost:3000/homeAppliances_info?id=${id}`).then(res => {
			let { code, data } = res.data
			if (code == 200) {
				let newlistinfo = []
				newlistinfo.push(data)
				setShangname(data.second_name);

				setshangcontent(data.content)
				setListInfo(newlistinfo)
				setImg_list(newlistinfo[0].img)
			}
		})
	}
	useEffect(() => {
		getinfo()
	}, [])
	const items = img_list.map((color, index) => (
		<Swiper.Item key={index}>
			<div
				onClick={() => {
					Toast.info(`你点击了卡片 ${index + 1}`)
				}}
			>
				<img src={img_list[index]} alt="" style={{ width: '100%' }} />
			</div>
		</Swiper.Item>
	))
	return (
		<div>
			<nav className={second_Css.main}>
				<div className={second_Css.head3er}>
					<span onClick={() => { navigate('/secondHand') }}>
						<svg t="1730188511702" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4245" width="30" height="30"><path d="M238.208798 504.759085c114.078175 125.190257 330.334497 341.639984 441.040878 454.927143L785.790178 856.32207c-36.308951-36.902468-343.031681-348.783685-344.618828-358.506117 62.496379-64.083527 246.805082-251.967662 324.579423-339.65784l-95.228875-93.844342L238.208798 504.759085z" fill="#272636" p-id="4246"></path></svg>
					</span>
					<span>商品详情</span>
					<span></span>
				</div>
				<div className={second_Css.box}>
					<div className="demo-swiper">
						<Swiper autoplay={5000}>{items}</Swiper>
					</div>
					<div className={second_Css.title}>
						{shang}
					</div>
					<div className={second_Css.contents}>
						<div className={second_Css.contentsone}>
							<span>商品简介：</span><br />
							<span>{shangContent}</span>
						</div>
					</div>
					<div className={second_Css.butover}>
						<div className={second_Css.user_img}>
							{/* 此处是用户头像 */}
						</div>
						<div className={second_Css.butttttt}>
							<p><button className={second_Css.ite} onClick={()=>{navigate('/')}}>了解更多</button></p>
						</div>
					</div>
				</div>
			</nav>
		</div>
	)
}
